<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel app\models\ToliteHistorySearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = $this->title = $toilet[0]['cname'].'流量统计';
$this->params['breadcrumbs'][] = ['label' => '厕所状态', 'url' => ['current-toilet/charts',
    'id'=>$toilet[0]['t_id']]];
$this->params['breadcrumbs'][] = $this->title;
?>

<div class="tolite-history-index">
    <div>
    <h1 class=".text-left"><?= Html::encode($this->title) ?></h1>
    </div>
    <script src="http://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>

    <div class="graphs">
        <div style="height:360px" class="graph"><canvas id="ch_flow"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_days"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_month"></canvas></div>
        <div style="height:360px" class="graph"><canvas id="ch_year"></canvas></div>
    </div>


</div>
<script language="JavaScript">
    var times = [<?php $cn=count($flow);for($i=$cn-1;$i>0;$i--){echo '"'.substr($flow[$i]['time'],11,17).'",';}?>]
    var chart1 = document.getElementById('ch_flow').getContext('2d');
    var chart_flow = new Chart(chart1, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '当前人流量',
                data: [<?php $cn=count($flow);for($i=$cn-1;$i>0;$i--){echo $flow[$i]['num'].',';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            maintainAspectRatio: false
        }
    });    
    times = [<?php $cn=count($days);for($i=$cn-1;$i>0;$i--){echo $days[$i]['fday'].',';}?>]
    var chart2 = document.getElementById('ch_days').getContext('2d');
    var chart_days = new Chart(chart2, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '日流量',
                data: [<?php $cn=count($days);for($i=$cn-1;$i>0;$i--){echo $days[$i]['num'].',';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            maintainAspectRatio: false
        }
    });
    times = [<?php $cn=count($month);for($i=0;$i<$cn;$i++){echo $month[$i]['fmon'].',';}?>]
    var chart3 = document.getElementById('ch_month').getContext('2d');
    var chart_month = new Chart(chart3, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '月流量',
                data: [<?php for($i=0;$i<$cn;$i++){echo $month[$i]['num'].',';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            maintainAspectRatio: false
        }
    });
    times = [<?php $cn=count($year);for($i=0;$i<$cn;$i++){echo $year[$i]['fyr'].',';}?>]
    var chart4 = document.getElementById('ch_year').getContext('2d');
    var chart_year = new Chart(chart4, {
        type: 'line',
        data: {
            labels: times,
            datasets: [{
                label: '年流量',
                data: [<?php for($i=0;$i<$cn;$i++){echo $year[$i]['num'].',';}?>],
                borderColor:'darkblue',
                fill: false,
            }]
        },
        options: {
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                    },
            maintainAspectRatio: false
        }
    });
</script>